<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--移动端的兼容-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>注册账户</title>
    <!--公共部分的样式-->
    <link rel="stylesheet" type="text/css" href="../common_css/common.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <!--本页的样式-->
    <!--<link rel="stylesheet" type="text/css" href="css/registered_account.css" />-->
    <style type="text/css">
        @media only screen and (min-width: 320px) {
            html,
            body {
                font-size: 14px;
            }
        }
        /* @media only screen and (max-width: 320px),
    only screen and (max-device-width:320px) {
        html,
        body {
            font-size: 14px;
        }
    }*/
        /*最外层的div*/
        
        #account_statistic_main {
            width: 100%;
            min-width: 320px;
            height: 100%;
            background-color: #F7F7F7;
            overflow: auto;
        }
        /*头部*/
        
        #account_statistic_header {
            width: 100%;
            height: 50px;
            background-color: #21538D;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 1.38rem;
        }
        /*头部的左箭头*/
        
        #account_statistic_header span {
            float: left;
            font-size: 25px;
        }
        
        #account_statistic_header font {
            font-size: 1.38rem;
            margin-left: -20px;
        }
        /*身体*/
        
        #account_statistic_body {
            width: 100%;
            background-color: #F7F7F7;
            margin-top: 0.62rem;
        }
        /*主要内容的头像*/
        
        .forget_password_content {
            width: 100%;
            height: 13rem;
            /*border: 1px solid red;*/
            position: relative;
        }
        /*图片*/
        
        .forget_password_content_img {
            width: 6rem;
            height: 6rem;
            /* border: 1px solid red; */
            position: absolute;
            top: -30px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            margin-top: 57px;
            margin-bottom: 23px;
        }
        
        .forget_password_content_img img {
            width: 6rem;
            height: 6rem;
        }
        /*请输入手机号的内容*/
        
        .forget_password_content_please {
            width: 100%;
            height: 3rem;
            position: relative;
            top: -18px;
            /*border: 1px solid blue;*/
        }
        
        .forget_password_content_please div {
            width: 80%;
            height: 2.8rem;
            border: 1px solid #F6A623;
            border-radius: 5px;
            margin: auto;
            background-color: #FFFFFF;
            display: -webkit-box;
        }
        /*手机号输入的各种状态*/
        
        .forget_password_content_please_2 {
            width: 100%;
            height: 24px;
            /* border: 1px solid blue; */
            /* margin-top: 10px; */
            position: relative;
            top: -20px;
        }
        
        .forget_password_content_please_2 div {
            width: 80%;
            height: 24px;
            /*border: 1px solid red;*/
            margin: auto;
            line-height: 24px;
            font-size: 12px;
            padding-left: 10px;
            display: -webkit-box;
        }
        
        .forget_password_content_please div span {
            display: inline-block;
            width: 40px;
            height: 30px;
            border: none;
            /*border: 1px solid blue;*/
            /*margin: 8px 0px 0px 5px;*/
            display: -webkit-box;
            -webkit-box-orient: horizontal;
        }
        
        .forget_password_content_please div span img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin: 5px 10px 0px 5px;
        }
        
        #forgetpassword_input,
        #forgetpassword_input_0,
        #forgetpassword_input_1 {
            display: -webkit-box;
            -webkit-box-flex: 1;
            height: 2.6rem;
            line-height: 2.6rem;
            border-radius: 5px;
            padding: 4px 0;
            box-sizing: border-box;
            border: none;
            outline: none;
            font-size: 14px;
        }
        /*请输入验证码*/
        
        .forget_password_content_please1 {
            width: 100%;
            height: 3rem;
            /*border: 1px solid blue;*/
            position: relative;
            top: -24px
        }
        
        #please1_center {
            width: 70%;
            height: 3rem;
            /*border: 1px solid red;*/
            margin: auto;
        }
        
        .content_please1_input {
            width: 50%;
            height: 2.6rem;
            border-radius: 5px;
            border: 1px solid #F6A623;
            float: left;
            color: #6B6B6B;
        }
        
        .content_please1_input input {
            width: 100%;
            height: 2.4rem;
            line-height: 2.4rem;
            font-size: 1rem;
            border-radius: 5px;
            border: none;
            outline: none;
            /*border: 1px solid red;*/
            padding-left: 10px;
        }
        
        .content_please1_set {
            width: 50%;
            height: 3rem;
            /*border: 1px solid green;*/
            float: left;
        }
        
        #get_code {
            width: 90%;
            height: 35px;
            float: right;
            font-size: 0.875em;
            /*margin: 3px 0px 0px 0px;*/
            line-height: 35px;
            border-radius: 5px;
            background-color: #F6A623;
            color: white;
            text-align: center;
            outline: none;
            border: none;
        }
        
        .content_please1_set div {
            width: 90%;
            height: 35px;
            float: right;
            font-size: 0.875em;
            margin: 6px 0px 0px 0px;
            line-height: 35px;
            border-radius: 5px;
            background-color: #F6A623;
            color: white;
            text-align: center;
        }
        
        .loginalert {
            position: fixed;
            top: 50%;
            left: 50%;
            background: black;
            color: #fff;
            transform: translate(-50%, -50%);
            padding: 11px;
            border-radius: 16px;
            text-align: justify;
            display: none;
        }
        /*确认*/
        
        .forget_password_content_confirm {
            width: 100%;
            height: 2.5rem;
            /* border: 1px solid blue; */
            margin-top: -0.5rem;
        }
        
        .forget_password_content_confirm div {
            width: 40%;
            height: 2.5rem;
            margin: auto;
            line-height: 1.5rem;
            text-align: center;
            color: white;
            /*border: 1px solid red;*/
            background-color: #F6A623;
            border-radius: 5px;
        }
        /*注册即视为同意 秒星APP用户协议*/
        
        @media screen and (min-width:375px) {
            .register_agree {
                bottom: 4rem !important;
            }
        }
        
        .register_agree {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: #323232;
            letter-spacing: 0.3px;
            position: absolute;
            bottom: 1rem;
        }
        
        .istrue {
            color: green;
            border-color: green !important;
        }
        
        .isfalse {
            color: red;
            border-color: red !important;
        }
        
        .dis {
            display: none;
        }
        
        .gray {
            background-color: gray !important;
        }
        
        .yellor {
            background-color: #F6A623 !important;
        }
    </style>
</head>

<body>
    <!--总div-->
    <div id="account_statistic_main">
        <!---头部-->
        <div id="account_statistic_header">
            <span class="iconfont icon-back icon_fanhui"></span>
            <font>注册账户</font>
        </div>
        <!--身体-->
        <div id="account_statistic_body">
            <!--居中的头像-->
            <div class="forget_password_content">
                <div class="forget_password_content_img">
                    <img src="../commonimg/seelogo.png" />
                </div>
            </div>
            <!-- 昵称 -->
            <div class="forget_password_content_please">
                <div v-bind:class="{istrue:isactive_name, isfalse:notactive_name}"> <span style="margin-top: 2px;"><img src="../commonimg/用户昵称@2x.png"/></span>
                    <input type="text" id="forgetpassword_input_0" placeholder="请输入昵称" v-on:blur="judgment_name" v-model="username" />
                </div>
            </div>
            <div class="forget_password_content_please_2">
                <div id="phone_num_error" v-bind:class="{istrue:isactive_name, isfalse:notactive_name}" v-html="falsename"> </div>
            </div>
            <!--请输入手机号-->
            <div class="forget_password_content_please">
                <div v-bind:class="{istrue:isactive_pho, isfalse:notactive_pho}"> <span style="margin-top: 2px;"><img src="../commonimg/手机号@2x.png"/></span>
                    <input type="text" id="forgetpassword_input" placeholder="请输入手机号码" v-on:blur="judgment_phone" v-model="phonenumber" />
                </div>
            </div>
            <div class="forget_password_content_please_2">
                <div id="phone_num_error" v-bind:class="{istrue:isactive_pho, isfalse:notactive_pho}" v-html="falsephone"> </div>
            </div>
            <div class="forget_password_content_please">
                <div v-bind:class="{istrue:isactive_pas, isfalse:notactive_pas}"> <span><img src="../commonimg/密码@2x.png"/></span>
                    <input type="password" id="forgetpassword_input_1" placeholder="输入6-20个字母、数字、下划线" v-on:keypress="judgment_password" v-model="password" />
                </div>
            </div>
            <div class="forget_password_content_please_2">
                <div id="phone_num_error" v-bind:class="{istrue:isactive_pas, isfalse:notactive_pas}" v-html="falsepassword"> </div>
            </div>
            <!--请输入验证码-->
            <div class="forget_password_content_please1">
                <div id="please1_center">
                    <div class="content_please1_input">
                        <input id="please_center_code" type="text" placeholder="请输入验证码" />
                    </div>
                    <div class="content_please1_set">
                        <input type="button" id="get_code" value="获取验证码" v-bind:value="yanzhengma" v-bind:disabled="dis" v-on:click="getyan()" :class="isactive_pas == true&&isactive_pho == true && ffon == true? 'yellor' : 'gray'" />
                    </div>
                </div>
            </div>
            <!--请确认-->
            <div class="forget_password_content_confirm">
                <div id="register_sure">确认</div>
            </div>
            <!--注册即视为同意 秒星APP用户协议-->
            <div class="register_agree">
                注册即视为同意 见到APP用户协议
            </div>
            <div class="loginalert">
                <p>验证码已经过期或失效</p>
            </div>
        </div>
    </div>
    <script src="../common_js/jquery-1.11.0.min.js"></script>
    <!--公共的点击预约的加号的按钮的跳转以及点击每页左上角的跳转-->
    <script src="../common_js/onclick_pop_view.js"></script>
    <script src="../common_js/vue.js"></script>
    <script type="text/javascript">
        //      veu写的点击获取验证码时候的判断
        var myvue = new Vue({
            el: "body",
            data: {
                yanzhengma: "获取验证码",
                dis: true,
                phonenumber: "",
                password: "",
                falsephone: "",
                isactive_pho: false,
                notactive_pho: false,
                isactive_pas: false,
                notactive_pas: false,
                falsepassword: '',
                bc_color: "gray",
                //
                isactive_name: false,
                //
                notactive_name: false,
                //输入的昵称
                username: "",
                //昵称格式不对
                falsename: "",
                ffon: true
            },
            methods: {
                getyan: function() {
                    //vue里边的这个this指向vue
                    //console.log(this);
                    console.log(1)
                    var timess = 60;
                    //在外边定义一个tthis,用来指向vue的这个this
                    var tthis = this;
                    var ting = setInterval(function() {
                        if (timess == -1) {
                            clearTimeout(ting);
                            tthis.yanzhengma = "获取验证码";
                            tthis.dis = false;
                            tthis.ffon = true;
                            timess = 60;
                        } else {
                            //此时的this指向window
                            //                      console.log(this)
                            tthis.yanzhengma = "重新获取" + timess + "";
                            tthis.dis = true;
                            tthis.ffon = false;
                            timess--;
                        }
                    }, 1000);
                    console.log(tthis.isactive_pho);
                    console.log(tthis.notactive_pho);

                },
                judgment_password: function(attribute) {

                    var al = this;
                    console.log(al)
                    var registPassword = al.password;
                    var passw = /^(\w){6,20}$/g;
                    if (passw.test(registPassword) != true) {
                        al.notactive_pas = true;
                        al.falsepassword = "    <p>请输入正确的格式</p>";
                        al.dis = true;
                        al.bc_color = "gray";
                        al.isactive_pas = false;
                    } else {
                        al.notactive_pas = false;
                        al.isactive_pas = true;
                        al.falsepassword = "<p>输入正确</p>";
                        al.dis = false;
                        // this.bc_color = "#F6A623";
                    }
                },
                judgment_phone: function() {
                    var that = this
                    var registPhone = that.phonenumber;
                    var phones = /^1[3|4|5|7|8][0-9]{9}$/g;
                    if (phones.test(registPhone) != true) {
                        that.notactive_pho = true;
                        that.falsephone = " <p>请输入正确的格式</p>";
                        that.dis = true;
                        that.bc_color = "gray";
                        that.isactive_pho = false;
                    } else {
                        that.notactive_pho = false;
                        that.isactive_pho = true;
                        console.log(that.isactive_pho);
                        that.falsephone = " <p>输入正确</p>";
                        that.dis = false;
                        // this.bc_color = "#F6A623"
                    }


                },
                judgment_name: function() {
                    var vm = this;
                    var u_name = vm.username;
                    var text_name = /^[\u4e00-\u9fa5]{4,7}$|^[\dA-Za-z_]{8,14}$/g;
                    if (text_name.test(u_name) != true) {
                        vm.falsename = "<p>请输入正确的格式</p>";
                        vm.notactive_name = true;
                        vm.isactive_name = false;
                        vm.is_disab = false;
                        vm.bc_color = "gray";
                        vm.dis = true;
                    } else {
                        vm.falsename = " <p>输入正确</p>";
                        vm.notactive_name = false;
                        vm.isactive_name = true;
                        vm.dis = false;
                    }

                },
                common: function() {
                    var that = this
                    if (that.falsepassword == "<p>输入正确</p>" && that.falsephone == "<p>输入正确</p>") {
                        that.dis = true;
                        that.bc_color = "#F6A623";
                    } else {
                        that.dis = false;
                        that.bc_color = "gray";
                    }
                }

            }
        });

        //          发送验证码的接口
        $("#get_code").on("click", function() {
            var user_phonenum_val = $("#forgetpassword_input").val();
            $.ajax({
                type: "GET",
                url: "http://119.23.224.92/jiandao/user/sendPass",
                async: true,
                data: {
                    "mobile": user_phonenum_val
                },
                success: function(result) {
                    console.log(result);
                    console.log(JSON.parse(result));
                    //              解析json
                    var analyse_json = JSON.parse(result);
                    console.log(analyse_json.success);
                    if (analyse_json.success == "8888") {
                        alert("验证码发送成功，请注意查收");
                    } else {
                        alert("验证码发送失败，请在60秒后重现获取");
                    }
                }
            });
        });
        //          点击确认时的跳转
        $("#register_sure").on("click", function(e) {
            var user_password = $("#forgetpassword_input_1").val();
            var user_phonenum_val = $("#forgetpassword_input").val();
            var user_code = $("#please_center_code").val();
            var user_name = $('#forgetpassword_input_0').val();
            $.ajax({
                type: "POST",
                url: "http://119.23.224.92/jiandao/user/regist",
                async: true,
                data: {
                    "user_pwd": user_password,
                    "user_tel": user_phonenum_val,
                    "user_nickname": user_name,
                    "no": user_code
                },
                success: function(data) {
                    console.log(data);
                    console.log(JSON.parse(data));
                    var jiexi_json = JSON.parse(data);
                    console.log(jiexi_json.success);
                    if (jiexi_json.success == "8888") {
                        alert("注册成功");
                        //       在没有进行任何判断的时候进行的跳转
                        location.href = "../login/login.html";
                    };
                    if (jiexi_json.success == "1025") {
                        alert("验证码已经过期或失效");
                        $('.loginalert').css('display', 'block')
                            .find('p').text('验证码已经过期或失效');
                        setTimeout(function() {
                            $('.loginalert').css('display', 'none');
                        }, 2000)
                    };
                    if (jiexi_json.success == "1001") {
                        alert("你还有未填项哦！");
                        $('.loginalert').css('display', 'block')
                            .find('p').text('你还有未填项哦！');
                        setTimeout(function() {
                            $('.loginalert').css('display', 'none');
                        }, 2000)
                    };
                    if (jiexi_json.success == "1026") {
                        console.log("该手机号已经注册");
                        alert("该手机号已经注册，请前往登录页面");
                        $('.loginalert').css('display', 'block')
                            .find('p').text('该手机号已经注册');
                        setTimeout(function() {
                                $('.loginalert').css('display', 'none');
                            }, 2000)
                            // location.href = "../login/login.html";
                    };

                },
                error: function(err) {
                    console.log(e.target);
                    console.log("错误");
                    console.log(err);
                    console.log(err.status);
                }
            });

        });
    </script>
</body>

</html>